<template>
	<view class="common-car">
		<view class="empty-shop-car" v-if="isEmpty">
			<image src="/static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image>
			<text>当前您的购物车是空的</text>
			<view class="empty-shop-car-btn">
				<text>去逛逛</text>
			</view>
		</view>
		<view class="shop-car" v-else>
			<view v-for="(item, i) in carts" :key="i">
				<view class="store-header">
					<tar-checkbox :value="item.checked" style="height: 36rpx;" @input="updateCartGroup(item.id, $event)"></tar-checkbox>
					<text class="name">{{item.name}}</text>
					<image src="/static/images/youjiantou1.png" class="label" mode=""></image>
				</view>
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(cartItem, ix) in item.products" :key="ix">
						<view style="padding: 12px 0;">
							<cart-item-card :value="cartItem" @input="updateCartItem"></cart-item-card>
						</view>
						<template v-slot:right>
							<view class="delete-btn"> 删除</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "cart-list",
		data() {
			return {

			}
		},
		props: {
			list: {
				type: [Object, Array],
				default: {}
			}
		},
		computed: {
			carts() {
				return this.$store.getters.cartsGroup
			}
		},
		methods: {
			updateCartItem(value){
				this.$store.commit('modifyCartItem', value)
			},
			updateCartGroup(id, value){
				this.$store.commit('modifyCartGroup', {id,value})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.delete-btn {
		background: #fa4126;
		color: #fff;
		display: flex;
		align-items: center;
		width: 144rpx;
		justify-content: center;
	}

	.store-header {
		display: flex;
		padding: 0 12px;
		align-items: center;

		.name {
			margin: 0 8px;
		}
	}

	.label {
		width: 14rpx;
		height: 24rpx;
		margin-left: 10rpx;
		margin-top: 5rpx;
	}
</style>